<template>
  <view>
    <f-popup :close-on-click-modal="true" position="bottom" :show-flag.sync="localPageShowFlag">
      <view slot="top" class="flex-center-between cart-top">
        <view class="bolder">已选0件</view>
        <view class="gray">
          <text class="iconfont">&#xe7d3;</text>
          <text>清空购物车</text>
        </view>
      </view>
      <view class="table-view">
        <view class="cell flex" v-for="item in cartGoods" :key="item.id">
          <view class="pic mr20 not-shrink">
            <image class="good-img mb10" mode="aspectFit"  :src="getImageUrl(item.goodsImg)"></image>
          </view>
          <view class="right flex">
            <view class="font18 ellipsis">{{item.goodsName}}</view>
            <view class="flex-center-between">
              <view>￥{{item.goodsPrice}}</view>
              <view class="flex-center action-btn">
                <view class="iconfont minus gray" @click="minusClick(item)">&#xe68b;</view>
                <view class="result gray">{{item.num}}</view>
                <view class="iconfont add gray" @click="addClick(item)">&#xe68a;</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <cart-draft  :page-show-flag="true"></cart-draft>
    </f-popup>
  </view>
</template>

<script>
import CartDraft from "@/pages/cart/components/cartDraft.vue";
import {mainData} from "@/pages/cart/components/mainData";
import FPopup from "@/pages/components/f-popup.vue";
import {cartDeleteDish} from "@/api";

export default {
  name: 'index',
  mixins: [],
  components: {FPopup,CartDraft},
  props: {
    pageShowFlag:Boolean,
  },
  data () {
    return {
      localPageShowFlag: this.pageShowFlag
    }
  },
  computed: {
    cartGoods(){
      return mainData.cartData.goods ||[];
    }
  },
  watch: {},
  created () {},
  mounted () {
  },
  methods: {
    minusClick(item){
      let dic = {cartId:item.cartId,goodsCartIds:[item.id]}
      cartDeleteDish(dic).then(res=>{
        this.$emit('reload')
      });
    }
  }
}
</script>

<style scoped lang="scss">
.cart-top{
  padding-top: 30rpx;
}
.table-view{
  height: 500rpx;
  .cell{
    padding: 10rpx 0;
    border-bottom: 1rpx solid #eeeeee;
    .pic{
      width: 135rpx;
      height: 135rpx;
      border-radius: 20rpx;
      //background-color: #B7BDC6;
      image{
        width: 135rpx;
        height: 135rpx;
        border-radius: 20rpx;
        flex-shrink: 0;
      }
    }
    .right{
      flex-grow: 1;
      flex-direction: column;
      justify-content: space-between;
      .action-btn{
        .minus ,.add{
          font-size: 50rpx !important;
        }
        .result{
          min-width: 80rpx;
          text-align: center;
        }
      }
    }
  }
}
</style>